<div class="w100">
	<ul class="hC_choose clearfix">
		<li class="fl">
			<div class="hC_create greenBtn-o">
				<a href="#"><i class="fa fa-plus" aria-hidden="true"></i>创建主机</a>
			</div>
		</li>
		<li class="fl">
			<div class="hC_restart ashyBtn-o">
				<a href="#"><i class="fa fa-exchange" aria-hidden="true"></i> 软重启</a>
			</div>
		</li>
		<li class="fl">
			<div class="hC_detele ashyBtn-o">
				<a href="#"><i class="fa fa-trash-o" aria-hidden="true"></i>终止并删除</a>
			</div>
		</li>
		<li class="fl">
			<div class="hC_tag grayBtn-o">
				<a href="#"><i class="fa fa-tags" aria-hidden="true"></i>标签</a>
			</div>
		</li>
		<li class="fl">
			<div class="hC_refresh">
				<a href="#" title="刷新"><i class="fa fa-refresh fa-2x" aria-hidden="true"></i></a>
			</div>
		</li>
		<li class="fr">
			<div class="hC_search">
				<input type="text" ng-model = "hostnamesearch" value="请输入关键字……" onfocus="if(this.value == '请输入关键字……') this.value = ''" onblur="if(this.value =='') this.value = '请输入关键字……'"/>
				<a ng-click ="indexpage(1,hostnamesearch)"><i class="fa fa-search fa-lg" aria-hidden="true"></i></a>
			</div>
		</li>
	</ul>
	<div class="hC_host">
		<table class="hC_hostTable">
			<thead>
				<tr>
					<th class="hC_check"><input type="checkbox" name=""></th>
					<th class="hC_name">ID（名称）</th>
					<th class="hC_state">状态</th>
					<th class="hC_map">映像</th>
					<th class="hC_net">网络</th>
					<th class="hC_createdin">创建于</th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="item in hosts.virtualmachine">
					<td class="hC_check"><input type="checkbox" name=""></td>
					<td>{{item.name}}</td>
					<td>{{item.state}}</td>
					<td>{{item.templatename}}</td>
					<td ng-repeat="var in item.nic" >{{var.networkname}}</td>
					<td>{{item.created | date:'yyyy-MM-dd HH:mm:ss' }}</td>
					
				</tr>
			</tbody>
		</table>
		<div class="pages">
			<span>第{{pageindex}}页</span>
			<span ng-click="indexpage(1,hostnamesearch)"><a href="javascript:;">首页</a></span>
			<span ng-click = "prepage(pageindex-1,hostnamesearch)"><a href="javascript:;">上一页</a></span>
			<span ng-click ="nextpage(pageindex+1,hosts.count,hostnamesearch)"><a href="javascript:;">下一页</a></span>
			<span ng-click = "endpage(hosts.count,hostnamesearch)"><a href="javascript:;">尾页</a></span>
			<span>共{{hosts.count}}条</span>
		</div><!-- end of pages -->
		
	</div><!-- end of hC_host -->

	<div class="hC_detail">
		<div class="hC_detailToper">
			<p>云主机<span>This is cloudName.</span></p>
		</div>
		<div class="hC_detailChoose">
			<span class="grayBtn hostGeneral"><a href="javascript:;">云主机概况</a></span>
			<span class="grayBtn-o hostMonitor"><a href="javascript:;">云主机监控</a></span>
		</div>
		<ul class="hC_detailMess clearfix">
			<li class="fl">
				<div class="hC_messDemo">
					<div class="hC_toper">信息</div>
					<div class="hC_messDet">
						<p>名称: <span>uuu</span></p> 
						<p>云主机ID: <span>6b68a4f2-f120-4c04-9d74-771b0f42742b</span></p>
						<p>状态:<span>Active</span></p>
						<p>任务:<span>None</span></p>
						<p>可用域:<span>Public</span></p>
						<p>创建时间:<span>2016-12-11 20:30:24</span></p>
						<p>正常运行时间:<span>4天 19小时</span>
					</div>
				</div>
				<div class="hC_messDemo">
					<div class="hC_toper">IP地址</div>
					<div class="hC_messDet">
						<p>内网:<span>192.168.0.2</span></p>
					</div>
				</div>
				<div class="hC_messDemo">
					<div class="hC_toper">元数据</div>
					<div class="hC_messDet">
						<p>键名称:<span>default-keyPair</span></p>
						<p>镜像名称:<span>wlcentos6.5</span></p>
					</div>
				</div>
			</li>
			<li class="fr">
				<div class="hC_messDemo">
					<div class="hC_toper">信息</div>
					<div class="hC_messDet">
						<p>名称: <span>uuu</span></p> 
						<p>云主机ID: <span>6b68a4f2-f120-4c04-9d74-771b0f42742b</span></p>
						<p>状态:<span>Active</span></p>
						<p>任务:<span>None</span></p>
						<p>可用域:<span>Public</span></p>
						<p>创建时间:<span>2016-12-11 20:30:24</span></p>
						<p>正常运行时间:<span>4天 19小时</span>
					</div>
				</div>
				<div class="hC_messDemo">
					<div class="hC_toper">安全组</div>
					<div class="hC_messDet">
						<p>名称: <span>uuu</span></p> 
						<p>云主机ID: <span>6b68a4f2-f120-4c04-9d74-771b0f42742b</span></p>
						<p>状态:<span>Active</span></p>
						<p>任务:<span>None</span></p>
						<p>可用域:<span>Public</span></p>
						<p>创建时间:<span>2016-12-11 20:30:24</span></p>
						<p>正常运行时间:<span>4天 19小时</span>
					</div>
				</div>
			</li>
		</ul>
		<ul class="hC_detailLine clearfix">
			<li>
				<div id="line1" style="width:270px;height:272px;"></div>
			</li>
			<li>
				<div id="line2" style="width:270px;height:272px;"></div>
			</li>
			<li>
				<div id="line3" style="width:270px;height:272px;"></div>
			</li>
			<li>
				<div id="line4" style="width:270px;height:272px;"></div>
			</li>
			<li>
				<div id="line5" style="width:270px;height:272px;"></div>
			</li>
			<li>
				<div id="line6" style="width:270px;height:272px;"></div>
			</li>
		</ul>
	</div><!-- end of hC_detail -->
</div>

<div class="pop popsHost" style="display: none;">
	<div class="popCont popsHost_cont">
		<div class="popsTit clearfix">
			<p>创建主机</p>
			<a href="#"><i class="fa fa-times fa-lg" aria-hidden="true"></i></a>
		</div>

		<div class="popsHost_wrap clearfix">
			<div class="popsHost_choose fl">
				<ul class="popsHost_step clearfix">
					<li ng-class="{'stepOn':step>=1}">选择映像<span>1</span></li>
					<li ng-class="{'stepOn':step>=2}">配置选择<span>2</span><b></b></li>
					<li ng-class="{'stepOn':step>=3}">网络设置<span>3</span><b></b></li>
					<li ng-class="{'stepOn':step>=4}">基本信息<span>4</span><b></b></li>
				</ul>
				<div class="popsHost_all clearfix">
					<div class="popsHost_list fl">
						<div class="popsHost_overHide">
							<ul class="popsHost_listChoose">
								<li class="clearfix">
									<div class="popsHost_listChooseTxt fl">类别：</div>
									<div class="popsHost_listChooseDet fl">
										<span ng-class="{'greenBtn':(templateTag=='normal'),'greenBtn-o':(templateTag!='normal')}"  ng-click="selectTag('normal')"><a href="#">常用</a></span>
										<span ng-class="{'greenBtn':(templateTag=='inuse'),'greenBtn-o':(templateTag!='inuse')}" class="greenBtn-o" ng-click="selectTag('inuse')"><a href="#">自用</a></span>
										<span ng-class="{'greenBtn':(templateTag=='market'),'greenBtn-o':(templateTag!='market')}" class="greenBtn-o" ng-click="selectTag('market')"><a href="#">市场</a></span>
									</div>
								</li>
							</ul>
							<div class="popsHost_over279">
								<ul class="popsHost_tabel" ng-repeat ="var in template.result|filter:templateFilter">
									<li ng-class="{'popsHost_tabelOn':(formBean.templatename==var.name)}" ng-click = "templatechange(var)"><!-- popsHost_tabelOn -->
										<span class="blueTxt">{{var.name}}</span>
									</li>
								</ul>
							</div>
						</div>
						<div class="popsHost_btn clearfix">
							<span ng-class="{'grayBtn-null':!validateStep1(),'grayBtn':validateStep1()}" class="popsHost_next fr" ng-click="next()"><a href="">下一步</a></span>
							<!-- <span class="grayBtn-null grayBtn popsHost_next fr">下一步</span> -->
						</div>
					</div>
					<div class="popsHost_list fl">
						<div class="popsHost_over">
							<ul class="popsHost_setting">
							 	<li>
							 		<p>主机类型</p>
							 		<span ng-class="{'settingOn':(formBean.performancename=='性能型')}" ng-click  = "performancechange('性能型')">性能型</span>
							 		<span ng-class="{'settingOn':(formBean.performancename=='超高性能型')}" ng-click = "performancechange('超高性能型')">超高性能型</span>
							 	</li>
							 	<li>
							 		<p>CPU</p>
							 		<span ng-class="{'settingOn':(formBean.cpunumber==1)}" ng-click="cpuchange(1)">1核</span>
							 		<span ng-class="{'settingOn':(formBean.cpunumber==2)}" ng-click="cpuchange(2)">2核</span>
							 		<span ng-class="{'settingOn':(formBean.cpunumber==4)}" ng-click="cpuchange(4)">4核</span>
							 		<span ng-class="{'settingOn':(formBean.cpunumber==8)}" ng-click="cpuchange(8)">8核</span>
							 		<span ng-class="{'settingOn':(formBean.cpunumber==12)}" ng-click="cpuchange(12)">12核</span>
							 		<span ng-class="{'settingOn':(formBean.cpunumber==16)}" ng-click="cpuchange(16)">16核</span>
							 	</li>
							 	<li>
							 		<p>内存</p>
							 		<span ng-class="{'settingOn':(formBean.memory==1*1024)}" ng-click="memorychange(1*1024)">1G</span>
							 		<span ng-class="{'settingOn':(formBean.memory==2*1024)}" ng-click="memorychange(2*1024)">2G</span>
							 		<span ng-class="{'settingOn':(formBean.memory==4*1024)}" ng-click="memorychange(4*1024)">4G</span>
							 		<span ng-class="{'settingOn':(formBean.memory==6*1024)}" ng-click="memorychange(6*1024)">6G</span>
							 		<span ng-class="{'settingOn':(formBean.memory==8*1024)}" ng-click="memorychange(8*1024)">8G</a></span>
							 		<span ng-class="{'settingOn':(formBean.memory==12*1024)}" ng-click="memorychange(12*1024)">12G</span>
							 		<span ng-class="{'settingOn':(formBean.memory==16*1024)}" ng-click="memorychange(16*1024)">16G</span>
							 		<span ng-class="{'settingOn':(formBean.memory==24*1024)}" ng-click="memorychange(24*1024)">24G</span>
							 		<span ng-class="{'settingOn':(formBean.memory==32*1024)}" ng-click="memorychange(32*1024)">32G</span>
							 		<span ng-class="{'settingOn':(formBean.memory==40*1024)}" ng-click = "memorychange(40*1024)">40G</span>


							 		

							 	</li>
							</ul>
						</div>
						<div class="popsHost_btn clearfix">
							<span ng-click="pre()" class="grayBtn popsHost_pre fl"><a href="#">上一步</a></span>
							<span ng-class="{'grayBtn-null':!validateStep2(),'grayBtn':validateStep2()}" class="popsHost_next fr" ng-click="next()"><a href="">下一步</a></span>
						</div>
					</div>
					<div class="popsHost_list fl">
						<div class="popsHost_over">
							<ul class="popsHost_tabel" ng-repeat ="var in networks.network">
								<li ng-class="{'popsHost_tabelOn':(formBean.networkname==var.name)}" ng-click = "networkchange(var)">
									<span class="blueTxt">{{var.name}}</span>
								</li>
							</ul>
						</div>
						<div class="popsHost_btn clearfix">
							<span ng-click="pre()" class="grayBtn popsHost_pre fl"><a href="#">上一步</a></span>
							<span ng-class="{'grayBtn-null':!validateStep3(),'grayBtn':validateStep3()}" class="popsHost_next fr" ng-click="next()"><a href="">下一步</a></span>
						</div>
					</div>
					<div class="popsHost_list fl">
						<div class="popsHost_over">
							<ul class="popsHost_base">
								<li class="clearfix">
									<div class="fl">主机名称</div>
									<div class="fr"><input type="text" class="w64" ng-model="formBean.displayname"/></div>
								</li>
								<li class="clearfix">
									<div class="fl">SSH登录方式</div>
									<div class="fr">
										<label><input type="radio" name="SSH" />SSH密钥 (?)</label>
										<label><input type="radio" name="SSH" checked="checked" />密码</label>
									</div>
								</li>
								<li class="clearfix">
									<div class="fl">用户名</div>
									<div class="fr"><input type="text" class="w64" value="root" disabled /></div>
								</li>
								<li class="clearfix">
									<div class="fl">SSH密钥</div>
									<div class="fr"><input type="text" class="w30" value="1" /></div>
								</li>
								<li class="clearfix">
									<div class="fl">用户数据</div>
									<div class="fr">
										<label><input type="radio" name="userDate" checked="checked" />无</label>
										<label><input type="radio" name="userDate"/>文本</label>
										<label><input type="radio" name="userDate"/>压缩包</label>
										<label><input type="radio" name="userDate"/>执行文件</label>
									</div>
								</li>
							</ul>
						</div>
						<div class="popsHost_btn clearfix">
							<span ng-click="pre()" class="grayBtn popsHost_pre fl"><a href="#">上一步</a></span>
							<span ng-click="submit()" class="greenBtn fr"><a href="#">创建</a></span>
						</div>
					</div>
				</div>
			</div>
			<div class="popsHost_detail fl">
				<p>配置详情</p>
				<table class="popsHost_detTable">
					<tr>
						<td class="popsHost_td1">映像</td>
						<td class="popsHost_td2">{{formBean.templatename}}</td>
					</tr>
					<tr>
						<td class="popsHost_td1">主机类型</td>
						<td class="popsHost_td2">{{formBean.performancename}}</td>
					</tr>
					<tr>
						<td class="popsHost_td1">CPU核数</td>
						<td class="popsHost_td2">{{formBean.cpunumber}} </td>
					</tr>
					<tr>

						<td>内存(G)</td>
						<td>{{formBean.memory?formBean.memory/1024:null}}</td>

					</tr>
					<tr>
						<td class="popsHost_td1">网络方案</td>
						<td class="popsHost_td2">{{formBean.networkname}}</td>
					</tr>
					<tr>
						<td class="popsHost_td1">名称</td>
						<td class="popsHost_td2">{{formBean.displayname}}</td>
					</tr>
						
				</table>
				<h6>
					主机价格: <span>¥0.10</span>每小时<sub>(合¥72.00每月)</sub>
				</h6>
				<h6>
					映像价格: <span>¥0.10</span>每小时<sub>(合¥72.00每月)</sub>
				</h6>
				<h4>
					总价格: <span>¥0.10</span>每小时<sub>(合¥72.00每月)</sub>
				</h4>
			</div>
		</div>
		
	</div><!-- end of popsHost_cont -->

	<div class="bg"></div>
</div><!-- end of popsHost -->

<div class="pop popsTips" style="display: none;">
	<div class="popCont popsTips_cont">
		<div class="popsTit clearfix">
			<p>提示</p>
			<a href="#"><i class="fa fa-times fa-lg" aria-hidden="true"></i></a>
		</div>
		<div class="popsTips_wrap">
			<div class="popsTips_txt">
				<p>确定创建主机吗？</p>
			</div>
			<div class="popsTips_Btns clearfix">
				<span class="grayBtn fl"><a href="#">取消</a></span>
				<span class="greenBtn fr"><a href="#">确定</a></span>
			</div>
		</div>
	</div>

	<div class="bg"></div>
</div><!-- end of popsTips -->
<script type="text/javascript" src="./js/host.js"></script>